<template>
<div style="width: 300px; height: 400px">
    <div class="common-func">
		<div class="my-app-list">
			<!-- <div class="app-item">
				<div class="tit">应收生成</div>
				<span class="icon iconfont iconclose"></span>
			</div> -->
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
			<div class="app-item">应收生成</div>
		</div>
		<i class="el-icon-s-tools common-set" @click="openCommonFunctionSet"></i>
	</div>
    <el-dialog title="常用功能设置" :close-on-click-modal="false" class="drag-dialog"
        :visible.sync="dialogVisible" width="800px">
        <!-- 内容区域 -->
        <div class="dialog-content-wrapper">
            <div class="drag-section">
                <div class="section-tit">
                    <h3>常用功能 <span>按住拖动调整顺序</span></h3>
                </div>
                <div class="drag-box">
                    <!-- <ul class="drag-ul">
                        <li class="drag-item">应收生成<i class="el-icon-close"></i></li>
                    </ul> -->
                    <draggable tag="ul" :list="myCollectionList" class="drag-ul">
                        <li class="drag-item" v-for="(item, idx) in myCollectionList" :key="item.menuId">{{item.menuName}}<i class="el-icon-close" @click="removeCollection(idx)"></i></li>
                    </draggable>
                </div>
            </div>
        </div>
        <!-- 按钮区域 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    name: 'commonFunction',
    components: {
        draggable
    },
	data() {
		return {
            myCollectionList: [ // 我的常用功能列表
                {menuName: '工单调度', menuId: '1'},
                {menuName: '全局看板', menuId: '2'},
                {menuName: '服务大类', menuId: '3'},
                {menuName: '应收生成', menuId: '4'},
                {menuName: '应收管理', menuId: '5'},
                {menuName: '减免管理', menuId: '6'},
                {menuName: '综合收费', menuId: '7'},
                {menuName: '实收管理', menuId: '8'},
                {menuName: '划款方案设置', menuId: '9'},
                {menuName: '共有收益分成比例', menuId: '10'},
                {menuName: '交接验房检查项', menuId: '11'},
                {menuName: '交接验房处置', menuId: '12'},
                {menuName: '缺陷分类', menuId: '13'},
                {menuName: '客户档案', menuId: '14'},
                {menuName: '客户变更', menuId: '15'},
                {menuName: '身份审核', menuId: '16'},
                {menuName: '项目管理', menuId: '17'},
                {menuName: '合同查看', menuId: '18'},
                {menuName: '仪表档案', menuId: '19'},
                {menuName: '仪表读数', menuId: '20'},
                {menuName: '转表数设置', menuId: '21'},
                {menuName: '审批', menuId: '22'},
                {menuName: '应用管理', menuId: '23'}
            ],
            dialogVisible: false
		}
    },
    methods: {
        openCommonFunctionSet() {
            this.dialogVisible = true
        },
        removeCollection(idx) { // 移除收藏
            this.myCollectionList.splice(idx, 1);
        }
    }
};
</script>

<style lang="scss">
.common-func {
	width: 100%;
	height: 100%;
	position: relative;	
	padding: 10px 0;
	box-sizing: border-box;
	.common-set {
		position: absolute;
		top: 10px;
		right: 0px;
		color: #027AFF;
		font-size: 20px;
		cursor: pointer;
		z-index: 2;
	}
	.my-app-list {
		height: 100%;
		overflow-y: auto;
		margin-right: -10px;
		font-size: 0;
		.app-item {
            padding: 0px 10px;
            font-size: 12px;
			border: 1px solid #d5e8fd;
			border-radius: 2px;
			line-height: 24px;
			color: rgba(0,0,0,0.65);
			// box-shadow: 0 0 2px rgba(0,0,0,0.65);
			display: inline-block;
			cursor: pointer;
			margin-right: 10px;
			margin-bottom: 10px;
			&:hover {
				border: 1px solid rgba(117,171,244,1);
				background-color: rgba(117,171,244,1);
				color: #fff;
			}
		}
	}	
}

.dialog-footer {
    text-align: center;
}
.drag-dialog .el-dialog__header {
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.drag-dialog .el-dialog__body {
    padding: 5px 20px 10px;
}
.dialog-content-wrapper {
    .section-tit {
        h3 {
            margin: 0; 
            padding: 0;
            font-size: 16px;
            font-weight: 600;
            line-height: 30px;
            color: rgba(0,0,0,0.85);
            span {
                font-size: 14px;
                margin-left: 30px;
                font-weight: normal;
                color: rgba(0,0,0,0.65);
            }
        }
    }
    .drag-box {
        height: 100px;
        overflow: auto;
        .drag-ul {
            font-size: 0;
            .drag-item {
                display: inline-block;
                font-size: 12px;
                color: rgba(0,0,0,0.85);
                background-color: rgb(255, 204, 128);
                min-width: 100px;
                box-sizing: border-box;
                padding: 6px 24px 6px 12px;
                cursor: move;
                margin: 0 8px 8px 0;
                position: relative;
                i {
                    font-size: 14px;
                    position: absolute;
                    right: 6px;
                    top: 8px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>